<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        ul{
            width: 100%;
            padding: 0;
        }
        li{
            list-style: none;
            float: left;
        }
        .image{
            width: 200px;
            margin-left: 80px;
        }
        #showLargeImg{
            width: 530px;
            position: fixed;
            z-index: 99999;
            left: 0;
            top: 0;
            display: none;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <img src="../../images/1.jpg" onmousemove="showLargeImage(this)" onmouseout="hideLargeImage()" class="image">
    </li>
    <li>
        <img src="../../images/2.jpg" onmousemove="showLargeImage(this)" onmouseout="hideLargeImage()" class="image">
    </li>
    <li>
        <img src="../../images/3.jpg" onmousemove="showLargeImage(this)" onmouseout="hideLargeImage()" class="image">
    </li>
</ul>
<img src="" alt="" id="showLargeImg">
<script>
    var showLargeImg = document.getElementById("showLargeImg");
    function showLargeImage(e) {
        console.log(e.src);
        showLargeImg.src = e.src;
        showLargeImg.style.left = (event.screenX+50) +"px";
        showLargeImg.style.top = (event.screenY-80) +"px";
        showLargeImg.style.display = "block";
    }
    function hideLargeImage() {
        showLargeImg.style.display = "none";
    }
</script>
</body>
</html>